import 'package:edu/pages/profile/security/credentail_setting/credential_setting_page_logic.dart';
import 'package:edu/pages/signin/verify_code_submit/verify_code_submit_page_logic.dart';
import 'package:edu/utils/app_router.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

class CredentialSettingPage extends StatefulWidget {
  const CredentialSettingPage({super.key});

  @override
  State<CredentialSettingPage> createState() => _CredentialSettingPageState();
}

class _CredentialSettingPageState extends State<CredentialSettingPage> {
  @override
  void initState() {
    super.initState();
    context.read<CredentialSettingPageLogic>().init();
  }

  @override
  Widget build(BuildContext context) {
    final logic = context.read<CredentialSettingPageLogic>();
    return Scaffold(
      appBar: AppBar(title: Text(logic.title)),
      body: _buildMainBody(context),
    );
  }

  Widget _buildMainBody(BuildContext context) {
    return Column(
      children: [
        const SizedBox(height: 20),
        _buildInputTextField(context),
        const SizedBox(height: 20),
        _buildMainButtonRow(context),
      ],
    );
  }

  Widget _buildMainButtonRow(BuildContext context) {
    final logic = context.read<CredentialSettingPageLogic>();
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const SizedBox(width: 20),
        Expanded(
          child: SizedBox(
            height: 44,
            child: Selector<CredentialSettingPageLogic, bool>(
              selector: (context, logic) => logic.validCredential,
              builder: (context, v, child) {
                return ElevatedButton(
                  onPressed: v ? _mainButtonPressed : null,
                  style: ButtonStyle(
                    shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(6.0),
                      ),
                    ),
                  ),
                  child: Text(
                    logic.buttonTitle,
                    style: Theme.of(context).textTheme.titleMedium,
                  ),
                );
              },
            ),
          ),
        ),
        const SizedBox(width: 20),
      ],
    );
  }

  void _mainButtonPressed() {
    final logic = context.read<CredentialSettingPageLogic>();
    if (logic.credentialType == CredentialSettingPageLogic.kCredentialEmail) {
      logic.changeUserEmail().then((value) {
        if (value) {
          context.pushNamed(
            AppRouter.kVerifyCodeSubmit,
            queryParameters: {
              'submit_type': VerifyCodeSubmitPageLogic.kResetEmail,
              'hold_value': logic.textController.text,
              'prev_route': AppRouter.kSecuritySetting,
            },
          );
        }
      });
    } else if (logic.credentialType ==
        CredentialSettingPageLogic.kCredentialPhone) {
      logic.changeUserPhoneNumber().then((value) {
        if (value) {
          context.pushNamed(
            AppRouter.kVerifyCodeSubmit,
            queryParameters: {
              'submit_type': VerifyCodeSubmitPageLogic.kResetPhoneNumber,
              'hold_value': logic.textController.text,
              'prev_route': AppRouter.kSecuritySetting,
            },
          );
        }
      });
    }
  }

  Widget _buildInputTextField(BuildContext context) {
    final logic = context.read<CredentialSettingPageLogic>();
    return Container(
      height: 50,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      color: Theme.of(context).colorScheme.surface.withAlpha(128),
      child: Row(
        children: [
          Text(
            logic.inputPreText,
            style: Theme.of(context).textTheme.titleMedium,
          ),
          const SizedBox(width: 5),
          Expanded(
            child: TextField(
              keyboardType: logic.inputType,
              controller: context
                  .read<CredentialSettingPageLogic>()
                  .textController,
              focusNode: context.read<CredentialSettingPageLogic>().focusNode,
              decoration: InputDecoration(
                hintText: logic.inputHintText,
                hintStyle: Theme.of(
                  context,
                ).textTheme.titleMedium?.copyWith(color: Colors.grey),
                border: InputBorder.none,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
